<template>
    <basic-container>
        <div class="app-container" style="background-color: #d3d5d9;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                <el-form-item label="日期查询">
                    <el-date-picker v-model="value" type="daterange" :clearable="false" value-format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="机种名称">
                    <el-input v-model="queryParams.aircraft" placeholder="请输入设备名称" clearable @clear="getList" />
                </el-form-item>
                <el-form-item label="排班名称">
                    <el-select v-model="queryParams.owner_id" placeholder="请选择" clearable>
                        <el-option v-for="item in schedule" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width: 80vw; height: 70vh;">
            <div id="chart" style="width: 100%; height: 100%;"></div>
        </div>
    </basic-container>
</template>

<script>
import * as echarts from 'echarts';
import { getreportTask } from "@/api/kind";
export default {
    data() {

        const posList = [
            'left',
            'right',
            'top',
            'bottom',
            'inside',
            'insideTop',
            'insideLeft',
            'insideRight',
            'insideBottom',
            'insideTopLeft',
            'insideTopRight',
            'insideBottomLeft',
            'insideBottomRight'
        ];

        const appConfigParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        const labelOption = {
            show: true,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{name|{a}}  {c}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '总共生产数量',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '合格数量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191]
                },
                {
                    name: '报废数量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '不合格数量',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        };

        return {
            queryParams: {
                start: null,
                finish: null,
                aircraft: null,
                owner_id: null,
            },
            value: [],
            posList,
            schedule: [{
                value: 1,
                label: '白班'
            }, {
                value: 2,
                label: '晚班'
            }],
            app: {
                configParameters: appConfigParameters,
                config: {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: this.updateChart
                }
            },
            labelOption,
            option
        };
    },
    methods: {
        getSUM() {
            let dom = document.getElementById("chart");
            this.$refs.chart = echarts.init(dom);
            this.$refs.chart.setOption(this.option);
        },
        handleQuery() {
            this.queryParams.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null
            this.queryParams.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null
            this.getList();
        },
        getList() {
            getreportTask(this.queryParams).then(response => {
                this.menuList = response.data.data
                this.menuList = this.menuList.filter((item) => {
                    return item.key.toLowerCase().includes((this.queryParams.aircraft || '').toLowerCase());
                });
                this.option.series[0].data = this.menuList.map(item => item.total);
                this.option.series[1].data = this.menuList.map(item => item.oks);
                this.option.series[2].data = this.menuList.map(item => item.scraps);
                this.option.series[3].data = this.menuList.map(item => item.ngs);
                const values = Object.values(response.data.docs);
                this.option.legend.data = values.slice(1)
                this.option.xAxis[0].data = this.menuList.map(item => item.key);
                this.total = response.data.total;
                this.getSUM()
            })
        },
        updateChart() {
            const labelOption = {
                rotate: this.app.config.rotate,
                align: this.app.config.align,
                verticalAlign: this.app.config.verticalAlign,
                position: this.app.config.position,
                distance: this.app.config.distance
            };
            this.$refs.chart.setOption({
                series: [
                    { label: labelOption },
                    { label: labelOption },
                    { label: labelOption },
                    { label: labelOption }
                ]
            });
        }
    },
    created() {
        // 获取当前日期
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1; // 月份从0开始，所以要加1
        var day = today.getDate();
        // 格式化日期
        var formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);

        this.queryParams.start = formattedDate
        this.queryParams.finish = formattedDate
        this.value = [formattedDate, formattedDate]
        this.getList()
    },

};
</script>